<template>
	<view>
		<!-- 大专栏显示 -->
		<view style="padding:0 20rpx 20rpx 20rpx;">
			<view style="margin-bottom: 20rpx;" v-if="zuanlan==2" @click="youxuan(item)" v-for="(item,index) in info.msg">
				<view class="body">
					<view class="body_left" style="width: 240rpx;">
						<image 
						 style='border-radius: 8rpx;width: 100%;height: 160rpx;'
						:src="item.logo_image" mode="" />
					</view>
					<view class="body_right">
						<view class="body_right_text huanhan">{{item.name}}</view>
						<view class="body_right_text1 huanhan">{{item.name}}</view>
						<view class="body_right_text2 huanhan">{{item.synopsis}}</view>
					</view>
				</view>
				<view class="xian" v-if="index!=4"></view>
			</view>

		</view>

		<!-- 小专栏显示 -->
		<view v-if="zuanlan==1">
			<view class="small">
				<view :class="item.id?'small_tab':'small_tab2'" @click="submit(item,index)"
					v-for="(item,index) in list_top">
					<text>{{item.name}}</text>
				</view>
			</view>
			<!-- 小专精品课程 -->
			<view class="jingpin" v-if="current==0">
				<jpkc style="width: 50%;" :data='item' v-for="(item,index) in info.msg.shipin"
					@onclick="submia(1,item)" />
			</view>
			<view class="zb" v-if="current==1">
				<view class="zhibo" @click="submia(2,item)" v-for="(item,index) in info.msg.zhibo">
					<image style="width: 240rpx;height: 160rpx;" :src="item.logo_image" />
					<view class="zhibo_1">
						<view class="zhibo_1_t">
							<view class="u">{{item.name}}</view>
							<view class="k">{{item.synopsis}}</view>
						</view>
						<view class="zhibo_1_2">
							<text>
								<text style="color:#FF2424 ;"> {{item.study}}</text>
								人已预约</text>
							<image v-if="item.debut_time-time>0" style="width: 140rpx;height: 58rpx;"
								src="@/static/hk.png" />
							<image v-else style="width: 140rpx;height: 58rpx;" src="@/static/yuu.png" />
						</view>
					</view>
				</view>

			</view>
			<view class="xxk" v-if="current==2">
				<xxk :data='info.msg.xianxia' />
			</view>
		</view>
	</view>
</template>

<script>
	// let b = parseInt(new Date().getTime() / 1000)
	export default {
		props: ['zuanlan', 'info', 'time'],
		data() {

			return {
				list_top: [{
					name: '精品课程',
					id: true
				}, {
					name: '直播',
					id: false
				}, {
					name: '线下课',
					id: false
				}],
				current: 0
			}
		},
		methods: {
			submia(a, b) {
				if (a == 1) {
					uni.navigateTo({
						url: `/pages/Boutique/details?cur_id=${b.cur_id}`
					});
				} else if (a == 2) {
					uni.navigateTo({
						url: `/pages/previewdetails/lookback?cur_id=${b.cur_id}`
					});

				} else {
					uni.navigateTo({
						url: `/index/xianxiake/xiangqing?cur_id=${b.cur_id}`
					});
				}
			},
			youxuan() {
				uni.navigateTo({
					url: `/pages/specialcolumn/specialcolumn?type=${2}`
					// url: `/pages/courses/details_c?current=${this.current}`
				});
			},
			submit(a, index) {
				this.list_top.forEach(v => {
					v.id = false
				})
				a.id = true,
					this.current = index
			}
		}
	}
</script>
<style lang="scss" >
	.zhibo {
		display: flex;
		border-bottom: 1rpx solid #EFEFEF;
		padding-bottom: 25rpx;
		padding-top: 25rpx;
		justify-content: space-between;

		.zhibo_1 {
			position: relative;
			width: 63%;

			.zhibo_1_2 {
				position: absolute;
				bottom: 0;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text:nth-of-type(1) {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #131314;
					opacity: 1;
				}

				text:nth-of-type(2) {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #91969A;
					opacity: 1;
				}
			}

			.zhibo_1_t {
				.u {
					display: block;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #131314;
					opacity: 1;
				}

				.k {
					display: block;
					font-size: 28rpx;
					margin-top: 10rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #91969A;
					opacity: 1;
				}
			}

		}
	}

	.xxk {
		padding: 20rpx;
	}

	.jingpin {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.zb {
		padding: 20rpx;
	}

	.small {
		display: flex;
		padding-left: 20rpx;
		margin-top: -20rpx;

		.small_tab {
			padding: 10rpx 20rpx 10rpx 20rpx;
			background-color: rgb(255, 213, 0);
			margin-right: 20rpx;

			text {
				color: rgb(125, 76, 0);
			}
		}

		.small_tab2 {
			padding: 10rpx 20rpx 10rpx 20rpx;
			background-color: rgb(245, 245, 245);
			margin-right: 20rpx;

			text {
				color: rgb(19, 19, 20);
			}
		}
	}

	.huanhan {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.xian {
		margin-top: 30rpx;
		height: 1rpx;
		background-color: #E3E3E3;
	}

	.body_rightimg {
		padding: 10rpx;
		display: flex;
		align-items: center;
		width: 430rpx;
		height: 152rpx;
		background-image: url(https://s4.ax1x.com/2022/01/14/73xrbF.png);
		background-size: 100%;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 42rpx;
		color: #91969A;
		opacity: 1;
	}

	.body_right {
		width: 60%;

		.body_right_text1 {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #131314;
			line-height: 60rpx;
			margin-bottom: 20rpx;
			opacity: 1;
		}

		.body_right_text2 {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #91969A;
		}

		.body_right_text {
			// width: 332rpx;
			padding-top: 5rpx;
			text-align: center;
			height: 40rpx;
			background-color: rgb(249, 239, 229);
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #131314;
			opacity: 1;
		}

		position: relative;
		left: -15rpx;

		.body_right1 {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #131314;
			opacity: 1;
		}
	}

	.body {
		display: flex;
		justify-content: space-between;
	}

	.body_left_2 {
		display: flex;
		// justify-content: space-between;
		margin-top: 20rpx;

		text {
			font-size: 24rpx;
			font-family: HarmonyOS Sans;
			font-weight: 400;
			opacity: 1;
		}

		.body_left_20 {
			font-size: 24rpx;
			margin-left: 30rpx;
			font-family: HarmonyOS Sans;
			font-weight: 400;
			color: #FF2424;
			opacity: 1;
		}
	}

	.utabs {
		// border-bottom: 1px solid #E3E3E3;
	}

	::v-deep .u-tab-bar {
		background-color: #FFD500 !important;
		// width: 40px !important ;
	}

	.all {
		padding: 20rpx;
	}
</style>
